<template>
    <div>
        <el-calendar id="calendar">
            <template
                    slot="dateCell"
                    slot-scope="{date, data}">
                <div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
                <p v-html="handleSelected(data.day)"></p>
            </template>
        </el-calendar>
    </div>
</template>
<script>
    import service from "../../utils/request";

    export default {
        data() {
            return {
                value: new Date(),
                dates: []
            }
        },
        methods: {
            handleSelected(day) {
                let res = ''
                this.dates.forEach(item => {
                    if (item.time == day) {  //判断显示数据
                        // if (item.on === 3 || item.on === 4 || item.back === 3 || item.back === 4) {
                        //     //请假状态
                        // } else {
                        //
                        // }
                        if (item.on === 0) {
                            res += '<span style="color: orange">上班未打卡</span>'
                            res += ','
                        } else if (item.on === 1) {
                            res += '<span style="color: darkseagreen">上班正常打卡</span>'
                            res += ','
                        } else if (item.on === 2) {
                            res += '<span style="color: red">上班迟到</span>'
                            res += ','
                        } else if (item.on === 3) {
                            res += '<span style="color: darkseagreen">请假中,等待批准</span>'
                        } else if (item.on === 4) {
                            res += '<span style="color: lightpink">休假</span>'
                        }
                        if (item.back === 0) {
                            res += '<span style="color: orange">下班未打卡</span>'
                        } else if (item.back === 1) {
                            res += '<span style="color: darkseagreen">下班正常打卡</span>'
                        } else if (item.back === 2) {
                            res += '<span style="color: red">下班早退</span>'
                        } else if (item.back === 3) {
                            res += ''
                        } else if (item.back === 4) {
                            res += ''
                        }
                    }
                })
                return res
            }, getRec() {
                //获取考勤记录
                service.get('/record/getRecord', {
                    params: {
                        userId: JSON.parse(localStorage.getItem("userInfo")).id
                    }
                }).then(res => {
                    this.dates = res.message
                    console.log(this.dates)
                })
            }
        }, mounted() {
        }, created() {
            this.getRec()
        }
    }
</script>
<style>
    .is-selected {
        color: #1989FA;
    }
</style>
